<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI教育平台测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h3 {
            margin-top: 0;
            color: #333;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .response {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            white-space: pre-wrap;
        }
        .loading {
            color: #007bff;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 AI教育平台测试页面</h1>
        
        <!-- 文本对话测试 -->
        <div class="section">
            <h3>💬 文本对话测试</h3>
            <textarea id="messageInput" placeholder="请输入您的问题..." rows="3"></textarea>
            <button onclick="sendMessage()">发送消息</button>
            <div id="chatResponse" class="response"></div>
        </div>

        <!-- 流式对话测试 -->
        <div class="section">
            <h3>🌊 流式对话测试</h3>
            <textarea id="streamInput" placeholder="请输入您的问题..." rows="3"></textarea>
            <button onclick="sendStreamMessage()">流式发送</button>
            <div id="streamResponse" class="response"></div>
        </div>

        <!-- 拍照搜题测试 -->
        <div class="section">
            <h3>📷 拍照搜题测试</h3>
            <input type="file" id="imageInput" accept="image/*">
            <button onclick="uploadImage()">上传图片</button>
            <div id="imageResponse" class="response"></div>
        </div>

        <!-- 智能出题测试 -->
        <div class="section">
            <h3>📝 智能出题测试</h3>
            <select id="subjectSelect">
                <option value="数学">数学</option>
                <option value="语文">语文</option>
                <option value="英语">英语</option>
                <option value="物理">物理</option>
                <option value="化学">化学</option>
            </select>
            <select id="gradeSelect">
                <option value="小学">小学</option>
                <option value="初中">初中</option>
                <option value="高中">高中</option>
            </select>
            <select id="difficultySelect">
                <option value="简单">简单</option>
                <option value="中等">中等</option>
                <option value="困难">困难</option>
            </select>
            <button onclick="generateQuestion()">生成题目</button>
            <div id="questionResponse" class="response"></div>
        </div>
    </div>

    <script>
        const API_BASE = '/api';

        // 文本对话
        async function sendMessage() {
            const message = document.getElementById('messageInput').value;
            if (!message.trim()) {
                alert('请输入消息');
                return;
            }

            const responseDiv = document.getElementById('chatResponse');
            responseDiv.innerHTML = '<div class="loading">正在发送消息...</div>';

            try {
                const response = await fetch(`${API_BASE}/ai/chat`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: message,
                        sessionId: Date.now().toString()
                    })
                });

                const result = await response.json();
                if (result.code === 200) {
                    responseDiv.innerHTML = result.data;
                } else {
                    responseDiv.innerHTML = `错误: ${result.message}`;
                }
            } catch (error) {
                responseDiv.innerHTML = `请求失败: ${error.message}`;
            }
        }

        // 流式对话
        async function sendStreamMessage() {
            const message = document.getElementById('streamInput').value;
            if (!message.trim()) {
                alert('请输入消息');
                return;
            }

            const responseDiv = document.getElementById('streamResponse');
            responseDiv.innerHTML = '<div class="loading">正在接收流式响应...</div>';

            try {
                const response = await fetch(`${API_BASE}/ai/chat/stream`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: message,
                        sessionId: Date.now().toString()
                    })
                });

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let fullResponse = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    const chunk = decoder.decode(value);
                    const lines = chunk.split('\n');
                    
                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            const data = line.substring(6);
                            if (data && data !== '[DONE]') {
                                try {
                                    const parsed = JSON.parse(data);
                                    if (parsed.event === 'message') {
                                        fullResponse += parsed.data;
                                        responseDiv.innerHTML = fullResponse;
                                    }
                                } catch (e) {
                                    // 忽略解析错误
                                }
                            }
                        }
                    }
                }
            } catch (error) {
                responseDiv.innerHTML = `流式请求失败: ${error.message}`;
            }
        }

        // 拍照搜题
        async function uploadImage() {
            const fileInput = document.getElementById('imageInput');
            const file = fileInput.files[0];
            if (!file) {
                alert('请选择图片');
                return;
            }

            const responseDiv = document.getElementById('imageResponse');
            responseDiv.innerHTML = '<div class="loading">正在识别图片...</div>';

            try {
                const formData = new FormData();
                formData.append('image', file);

                const response = await fetch(`${API_BASE}/ai/image-search`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                if (result.code === 200) {
                    responseDiv.innerHTML = result.data;
                } else {
                    responseDiv.innerHTML = `错误: ${result.message}`;
                }
            } catch (error) {
                responseDiv.innerHTML = `图片上传失败: ${error.message}`;
            }
        }

        // 智能出题
        async function generateQuestion() {
            const subject = document.getElementById('subjectSelect').value;
            const grade = document.getElementById('gradeSelect').value;
            const difficulty = document.getElementById('difficultySelect').value;

            const responseDiv = document.getElementById('questionResponse');
            responseDiv.innerHTML = '<div class="loading">正在生成题目...</div>';

            try {
                const response = await fetch(`${API_BASE}/ai/generate-question`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        subject: subject,
                        grade: grade,
                        difficulty: difficulty
                    })
                });

                const result = await response.json();
                if (result.code === 200) {
                    responseDiv.innerHTML = result.data;
                } else {
                    responseDiv.innerHTML = `错误: ${result.message}`;
                }
            } catch (error) {
                responseDiv.innerHTML = `生成题目失败: ${error.message}`;
            }
        }
    </script>
</body>
</html> 